import React, {Component} from 'react';
import NavHeader from '../../../components/NavHeader/NavHeader.jsx';
import './Main.scss';

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.maxCount = 140; // 最多输入140
        this.chineseInputing = false // 是否正在输入中文
        this.state = {
            count: 140,
            startIndex: 0
        };
    }

    componentDidMount () {
        // 监听输入中文
        this.textRef.addEventListener('compositionstart', () => {
            this.chineseInputing = true;
        })

        this.textRef.addEventListener('compositionend', (e)=>{
            this.chineseInputing = false;
            this.onIuput(e.target.value);
        });
    }

    // 渲染星级评价
    renderStar() {
        let array = [];
        for (let i = 0 ; i<5 ;i++) {
            let cls = i >= this.state.startIndex ? "star-item" : "star-item light";
            array.push(<div key={i} onClick={() => this.showStar(i)} className={cls}></div>);
        }

        return array;
    }
    // 点击评分
    showStar(i) {
        this.setState({
            startIndex: i + 1
        });
    }

    // 监听输入
    onIuput (val) {
        let len = val.length;
        if (!this.chineseInputing) {
            this.setState({
                count: this.maxCount - len,
                inputContent: val
            });
        }
    }

    render() {
        return (
          <div className="evaluate-wrapper">
              <NavHeader title="评价"></NavHeader>
              <div className="evaluate-box">
                  <div className="star-area">
                      {this.renderStar()}
                  </div>
                  <div className="comment">
                      <textarea minLength="140"
                                placeholder="亲，菜品的口味如何，商家的服务是否周到?"
                                className="comment-input"
                                ref={(v) => this.textRef = v}
                                onChange={(e)=>this.onIuput(e.target.value)}
                      ></textarea>
                      <span className="count">{this.state.count}</span>
                  </div>
                  <div className="food-title">
                      厚切牛肉 + 香辣口水鸡 + 可乐
                  </div>
              </div>

              <button type="button" className="submit-btn">提交评价</button>
          </div>
        )
    }
}
